<template>
	<view class="sign_in page">
		<status-bar title="签到"></status-bar>
		<view class="integralR" :style="{'margin-top': navHeight+'px'}" @click="integralR">
			<text>{{nameDefinition.fenTitle?nameDefinition.fenTitle:'积分'}}记录</text>
		</view>
		<image class="signBg" :style="{'margin-top': navHeight+'px'}" :src="staticUrl+'/images/jh_up/cloud.png'"></image>
		<view class="myjf toTop" :style="{'--color': color,'--color_aid': color_aid}">
			<view class="c1">
				<view class="c2">
					<view class="c3 to45deg" :style="{'--color': color,'--color_aid': color_aid}">
						<view class="c4">
							<view class="jfNub">
								<view class="num thmeColor">{{signJf}}</view>
								<view class="li toRightto" :style="{'--color': color,'--color_aid': color_aid}"></view>
								<text class="thmeColor" :style="{'--color': color}">我的{{nameDefinition.fenTitle?nameDefinition.fenTitle:'积分'}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="signTXT" v-if='signState'>今天还没有签到，赶紧签到领{{nameDefinition.fenTitle?nameDefinition.fenTitle:'积分'}}吧！</view>
			<view class="signTXT" v-else>已经连续签到{{signTimes}}天</view>
		</view>

		<view class="calendar__wrap">
			<view class="header">
				<view class="current-date">{{today}}</view>
			</view>
			<view class="body">
				<view class="weeks">
					<view class="week__item" v-for="week in weeks" :key="week">{{week}}</view>
				</view>

				<view class="day__list" v-if="dateData && dateData.length > 0">
					<view class="day__item" v-for="(item,index) in dateData" :key="index">
						<view class="day"
						:style="{'--color': color,'--color_aid': color_aid}"
						:class='{
						notMon:item.mStatus==0||item.mStatus==2,
						lastSign:item.mStatus==0&&item.signState == "1",
						todayColor:item.isToday == "1",
						to45deg:item.isToday == "1",
						signColor:item.signState == "1"&&item.mStatus==1,
						nosignColor:item.signState == "0"&&item.mStatus==1,
					}'><text>{{item.date}}</text></view>
					</view>
				</view>
				<view v-if='noData' style='margin-top: -340rpx;'>
					<empty type='1' cat='4' msg='亲，您还没有签到信息哦~'></empty>
				</view>
			</view>
			<view class="clickbtns toRight" @click="clickbtns" :style="{'--color': color,'--color_aid': color_aid}">{{btnTxt}}</view>
		</view>
		<!-- 签到成功 -->
		<view class="mask flex-box align-center flex-center" v-if='signSuccess' @click='signSuccess=false'>
			<view>
				<view class='mask-Box' @click.stop>
					<view class="img-box to45deg" :style="{'--color': color,'--color_aid': color_aid}">
						<image :src="staticUrl+'/images/sign_succ.png'" class="sign_succ"></image>
						<image class="sign_cloud" :src="staticUrl+'/images/jh_up/cloud.png'" mode="widthFix"></image>
					</view>
					<view class='success-color signTip'>签到成功 !</view>
					<view class="signTxt">恭喜您获得 <text class="thmeColor" :style="{'--color': color}">{{succJf}}</text>{{nameDefinition.fenTitle?nameDefinition.fenTitle:'积分'}}</view>
					<view class='clickbtns toRight' :style="{'--color': color,'--color_aid': color_aid}" @click="backHome">去逛逛</view>
				</view>
				<text @click='signSuccess=false' class="iconfont icon-guanbi"></text>
			</view>
		</view>
		<!-- 签到失败 -->
		<view class="mask flex-box align-center flex-center" v-if='signFail' @click='signFail=false'>
			<view>
				<view class='mask-Box' @click.stop>
					<view class="img-box to45deg" :style="{'--color': color,'--color_aid': color_aid}">
						<image :src="staticUrl+'/images/sign_fail.png'" class="sign_succ"></image>
						<image class="sign_cloud" :src="staticUrl+'/images/jh_up/cloud.png'" mode="widthFix"></image>
					</view>
					<view class='error-color signTip'>签到失败！</view>
					<view class="signTxt">{{wrongTxt}}</view>
					<view class='clickbtns toRight' :style="{'--color': color,'--color_aid': color_aid}" @click='signFail=false'>返回重签</view>
				</view>
				<text @click='signFail=false' class="iconfont icon-guanbi"></text>
			</view>
		</view>
	</view>

</template>

<script>
	var that;
	export default {
		data() {
			return {
				color: getApp().globalData.color,
				color_aid: getApp().globalData.color_aid,
				checks: [1, 2, 3, 4, 5, 6],
				signSuccess: false, // 签到成功弹窗
				signFail: false, // 签到失败弹窗
				weeks: ["日", "一", "二", "三", "四", "五", "六"],
				today: '', // 今天
				dateData: [], // 日历
				btnTxt: '', // 签到按钮文字
				signState: '', // 是否可以签到 
				signTimes: 0, // 连续签到天数
				signJf: '0', //签到总积分
				succJf: '', // 签到成功积分
				wrongTxt: '', // 签到失败原因
				vid: '',
				bid: uni.getStorageSync('bid'),
				staticUrl: this.staticUrl,
				nameDefinition: uni.getStorageSync('startUp').nameDefinition,
				noData: false
			}
		},
		onShow() {
			var that = this;
			uni.getStorage({
				key: 'vid',
				success: function(res) {
					that.vid = res.data;
					that.myInfo(res.data);
					that.getRecord(res.data);
				}
			});
		},
		onShareAppMessage(option) {
			let shareData = uni.getStorageSync('shareData');
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + that.vid,
				imageUrl: shareData.imageUrl
			}
		},
		onLoad() {
			that = this
			
		},
		methods: {
			myInfo(vid) { // 获取当前用户信息
				that.$http.post({
					url: '/SRA_userIntegral/myInfo',
					data: {
						VeriCode: that.bid,
						vId: vid,
					}
				}).then(res => {
					if (res.data) {
						that.signJf = res.data.myJson.sign; // 积分余额
						that.signTimes = res.data.myJson.signday; // 连续签到天数
					}
				})
			},
			getRecord(vid) { // 获取签到记录
				const gDate = new Date();
				let year = gDate.getFullYear();
				let month = gDate.getMonth() + 1;
				let day = gDate.getDate();
				that.$http.get({
					url: '/SRA_userIntegral/signRecord',
					data: {
						VeriCode: that.bid,
						vId: vid,
						Y: year,
						M: month,
					}
				}).then(res => {
					if (res.code == 100 && res.data) {
						that.dateData = res.data;
						if (res.signState == '0') { // 是否可以签到 1可以  0否
							that.btnTxt = '已签到';
							that.signState = false;
						} else {
							that.btnTxt = '签到';
							that.signState = true;
						}
						that.dateData.forEach((d, i) => {
							d.mon = d.date.substring(5, 7); // 获取每天对应的月份
							if (d.mon.substring(0, 1) == '0') {
								d.mon = d.mon.substring(1, 2);
							}
							if (d.isToday == '1') { // 今天日期
								that.today = d.date;
							}
							d.date = d.date.substring(8, 10); // 当天日期
							if (d.date.substring(0, 1) == '0') {
								d.date = d.date.substring(1, 2);
							}
							if (parseInt(d.date) < day && parseInt(d.mon) == month) { // 本月已经过去的日期
								d.mStatus = 1;
							}
							if (parseInt(d.mon) < month) { // 上个月
								d.mStatus = 0;
							}
							if (parseInt(d.mon) > month) { // 下个月
								d.mStatus = 2;
							}
						})
					} else {
						uni.showToast({
							title: '暂无数据',
							icon:'none',
							duration: 2000
						});
					}
					if(!that.dateData || that.dateData.length < 1){
						that.noData = true
					}
				})
			},
			backPage() {
				uni.navigateBack({
					delta: 1
				})
			},
			clickbtns() {
				// 用户签到操作
				if (that.signState) {
					that.$http.post({
						url: '/SRA_userIntegral/signIn',
						data: {
							VeriCode: that.bid,
							vId: that.vid
						}
					}).then(res => {
						if (res.data) {
							that.signTimes = res.data.signDay; //连续签到天数
							that.signJf = res.data.jifen_yue; //用户当前积分
							that.succJf = res.data.jifen; //签到获得积分
							that.signSuccess = true;
							that.btnTxt = '已签到';
							that.signState = false;
						} else {
							that.signFail = true;
							that.wrongTxt = res.notice
						}
					})
				} else {
					uni.showToast({
						icon:'none',
						title: '请勿重复签到！',
						duration: 1000
					});
				}
			},
			integralR(){
				uni.navigateTo({
					url:'/userPage/sign/integralRecord'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.cancel {
		position: relative;
		top: 150rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 70upx;
		height: 70upx;
	}

	.mask-Box {
		width: 550upx;
		padding-bottom: 80rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: #F2F2F2;
		.img-box{
			height: 380rpx;
			padding-top: 60rpx;
			overflow: hidden;
			.sign_succ{
				width: 300rpx;
				height: 154rpx;
				display: block;
				margin: 0 auto 20rpx;
			}
			.sign_cloud{
				width: 100%;
			}
		}
	}

	.signTxt {
		font-size: 28upx;
		color: #999999;
		text-align: center;
		height: 38upx;
		text{
			font-weight: bold;
			font-size: 32rpx;
			margin: 0 4rpx;
		}
	}

	.signTip {
		text-align: center;
		font-size: 32upx;
		margin-bottom: 30upx;
	}


	.sign_in {
		width: 100%;
		height: 100%;
		background: #F2F2F2;
		position: absolute;
	}

	.signBg {
		width: 100%;
		height: 322upx;
		position: absolute;
		z-index: 2;
		top: 260upx;
		left: 0;
		right: 0;
	}

	.unihead {
		background: none;
		position: fixed;
		color: #FFFFFF;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 9;
	}

	.uni-page-head__title {
		text-align: center;
		height: 60upx;
		line-height: 60upx;
		font-weight: 700;
		font-size: 16px;
	}

	.action {
		font-size: 28upx;
		border-bottom: 2px solid #FF8273;
		color: #000000;
	}

	.uni-page-head__title .titles {
		margin: 0 10upx;
		display: inline-block;
	}

	.uni-page-head-bd {
		width: 100%;
		left: 0;
		right: 0;
		height: 60upx;
	}

	.uni-page-head {
		width: 100%;
		height: 88upx;
		padding: 14upx 6upx;
	}

	.backImg {
		width: 40upx;
		height: 40upx;
		position: absolute;
		left: 16upx;
		margin-top: 10upx;
		filter: invert(100%);
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background: none;
	}

	.top_view {
		height: var(--status-bar-height);
		width: 100%;
		position: relative;
		background: none;
		top: 0;
		z-index: 10;
	}

	.myjf {
		position: relative;
		text-align: center;
		width: 100%;
		height: 470upx;
		padding-top: 20rpx;
		.c1{
			background-color: rgba(255,255,255,.3);
			border-radius: 50%;
			width: 220rpx;
			height: 220rpx;
			margin: 0 auto;
			padding: 10rpx;
			.c2{
				width: 100%;
				height: 100%;
				border-radius: 50%;
				padding: 10rpx;
				background-color: rgba(255,255,255,1);
				.c3{
					width: 100%;
					height: 100%;
					border-radius: 50%;
					padding: 3rpx;
					.c4{
						width: 100%;
						height: 100%;
						border-radius: 50%;
						padding-top: 50rpx;
						background-color: rgba(255,255,255,1);
						.jfNub {
							text-align: center;
							position: relative;
							line-height: 60upx;
							.num {
								text-align: center;
								height: 60upx;
								font-size: 40rpx;
								font-weight: bold;
							}
							.li{
								height: 2rpx;
								margin: 0 24rpx;
							}
							text {
								text-align: center;
							}
						}
					}
				}
			}
		}
	}

	.myjf image {
		position: absolute;
		width: 260upx;
		left: 50%;
		margin-left: -130upx;
	}

	
	.clickbtns {
		position: relative;
		width: 240upx;
		line-height: 68upx;
		margin: 36upx auto 0;
		border-radius: 64upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 32upx;
	}

	/* jh */
	.calendar__wrap {
		background-color: #fff;
		color: #222222;
		position: relative;
		z-index: 11;
		border-radius: 30upx;
		padding-bottom: 50upx;
		margin: -40upx 48upx 0;
	}

	.header {
		padding: 0 24upx;
	}

	.current-date {
		text-align: center;
		font-size: 34upx;
		border-bottom: 2upx solid #eee;
		padding: 20upx 0;
	}

	.body {
		padding: 10upx;
	}

	.weeks {
		display: flex;
		font-size: 30upx;
		padding: 20upx 0;
	}

	.week__item {
		flex: 1;
		text-align: center;
	}

	.day__list {
		display: flex;
		flex-wrap: wrap;
	}

	.day__item {
		width: 14.285%;
		display: flex;
		justify-content: center;
		margin: 14upx 0;
	}

	.checked,
	.current {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 56upx;
		height: 56upx;
		border-radius: 100%;
		padding: 12upx;
		box-sizing: border-box;
		color: #fff;
	}

	.checked {
		background-color: #FF8473;
		font-size: 28upx;
	}

	.current {
		color: #FF8473;
		font-size: 34upx;
	}

	.day {
		width: 48upx;
		height: 48upx;
		border-radius: 50%;
		box-sizing: border-box;
		line-height: 48upx;
		text-align: center;
		text{
			position: relative;
			z-index: 2;
			font-size: 26upx;
		}
	}

	/**未签到颜色**/
	.nosignColor {
		background: #eeeeee;
	}

	.signColor {
		/**已签到颜色**/
		position: relative;
		&::before{
			position: absolute;
			content: '';
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			border-radius: 50%;
			z-index: 0;
			opacity: 0.3;
		}
	}

	.lastSign {
		/*上个月已签到颜色*/
		position: relative;
		color: #a8a2a1;
		&::before{
			position: absolute;
			content: '';
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			border-radius: 50%;
			z-index: 0;
			opacity: 0.15;
		}
		
	}

	.todayColor {
		/*今天的颜色*/
		color: white;
	}

	.notMon {
		/*不是本月字体颜色*/
		color: #999999;
	}

	.signTXT {
		position: relative;
		z-index: 1;
		color: white;
		text-align: center;
		font-size: 26upx;
		top: 24upx;
	}
	.integralR{
		 position: absolute;
		 top: 20rpx;
		 right: 20rpx;
		 z-index: 9;
		 color: #FFFFFF;
	}

</style>
